<template>
	<view>
		<view class="box-ly-zp" :style="style_box">
			<view :animation="animationData" class="cs-ct" :style="style_wh">
				<view class="cs-line">
					<view class="cs-litem" v-for="(item,index) in awardsList" :key="index"
						:style="[{transform:'rotate('+item.lineTurn+')'},{'background-color':themeColor},{left:(width/2) +'rpx'},{height:(height/2) +'rpx'},{'-webkit-transform-origin': '50% ' +(height/2) +'rpx'},{'transform-origin': '50% ' +(height/2) +'rpx'}]">
					</view>
				</view>
				<view class="cs-list">
					<view class="cs-item" :style="{color: themeColor }" v-for="(iteml,index2) in awardsList"
						:key="index2">
						<view class="cs-item-text"
							:style="[{transform:'rotate('+iteml.turn+')'},{'-webkit-transform-origin': '50% ' +(height/2) +'rpx'},{'transform-origin': '50% ' +(height/2) +'rpx'}]">
							<text class="txt">{{iteml.name}}</text>
							<image lazy-load="true" class="cs-item-text-img" :src="iteml.img"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 	<view class="cs-btn" :style="[{left:((width/2)-40) +'rpx'},{top:((height/2)-40) +'rpx'}]" @tap="playReward">参与
			</view> -->
			<view class="cs-btn" :style="[{left:((width/2)-40) +'rpx'},{top:((height/2)-40) +'rpx'}]"
				>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			height: {
				type: Number,
				default: 400
			},
			width: {
				type: Number,
				default: 400
			},
			themeColor: {
				type: String,
				default: '#E82E04',
			},
			// 是否旋转
			isRotate: {
				type: Boolean,
				default: false,
			},

			//停留位置
			stay_index: {
				type: Number,
				default: 1
			},
			drowId: {
				type: [Number, String],
			},
			pageType: {
				type: Number,
				default: 1
			},
			rotateDuration: {
				type: [String, Number]
			}

		},
		data() {
			return {
				runDeg: 360,
				animationRun: null,
				awardsList: {},
				animationData: {},
			};
		},
		watch: {
			list() {
				this.init()
			},
			isRotate() {
				// console.log('改变',this.isRotate)
				this.init()
				this.playReward()
			},
		},
		created() {
			this.init();
		},
		computed: {
			style_box() {
				// console.log(this.height,":that.height")
				let that = this;
				var height = parseInt(that.height);
				var width = parseInt(that.width);
				var style = '';
				if (height > 0) {
					style = `height:${height}rpx;`;
				}
				if (width > 0) {
					style += `width:${width}rpx;`;
				}
				style += `border: 8rpx solid ${that.themeColor};`;
				return style;
			},
			style_wh() {
				let that = this;
				var height = parseInt(that.height);
				var width = parseInt(that.width);
				var style = '';
				if (height > 0) {
					style = `height:${height}rpx;`;
				}
				if (width > 0) {
					style += `width:${width}rpx;`;
				}
				return style;
			},

		},

		methods: {
		
			onJoin() {
				this.$emit('join', true)
			},
			//旋转
			playReward() {
				if (this.isRotate) {
					console.log(this.isRotate,"this.isRotate")
					setTimeout(() => {
						var awardsNum = this.list;
						var runNum = 70; //旋转80周  
						// this.runDeg = this.runDeg || 0;
						// 旋转角度  
						this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - 2 * (360 /
							awardsNum.length))
						// console.log(awardsNum.length, "awardsNum.length")
						//创建动画  
						var animationRun = uni.createAnimation({
							duration: this.rotateDuration,
							timingFunction: 'linear'
						})
						animationRun.rotate(this.runDeg).step();
						this.animationData = animationRun.export();
						// console.log('旋转', this.isRotate, this.runDeg)
					}, 500)


				}

			},

			//画抽奖圆盘  
			init() {
				var awards = this.list;
				var awardsList = [];
				var turnNum = 1 / awards.length * 360; // 文字旋转 turn 值  

				// 奖项列表  
				for (var i = 0; i < awards.length; i++) {
					awardsList.push({
						turn: i * turnNum + 'deg',
						lineTurn: i * turnNum + turnNum / 2 + 'deg',
						name: awards[i].name,
						img: awards[i].img,
					});
				}
				this.awardsList = awardsList;
			},
		}

	}
</script>

<style>
	.txt {
		padding-top: 10upx;
		padding-bottom: 10upx;
	}

	/* 转盘 */
	.box-ly-zp {
		top: -43rpx;
		margin: 0 auto;
		position: relative;
		border-radius: 50%;
		box-shadow: 0 10upx 30upx #333, 0 0 10upx #000;

	}

	.cs-ct {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		display: block;
		border-radius: inherit;
		background-clip: padding-box;
	}

	.cs-element {
		position: relative;
		z-index: 1;
		width: inherit;
		height: inherit;
		border-radius: 50%;
	}

	.cs-list {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 9999;
	}

	.cs-item {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		font-weight: bold;
		text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6);
	}

	.cs-item-text {
		position: relative;
		display: block;
		padding-top: 20upx;
		margin: 0 auto;
		text-align: center;

		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.cs-item-text text {
		font-size: 30upx;
	}

	.cs-item-text-img {
		width: 60upx;
		height: 60upx;

		border-radius: 50%;
	}

	/* 分隔线 */
	.cs-line {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 99;
	}

	.cs-litem {
		position: absolute;

		top: 0;
		width: 3upx;

		overflow: hidden;

	}

	/**  
* 抽奖按钮  
*/
	.cs-btn {
		position: absolute;
		background-color: #e44025;
		z-index: 90;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		color: #f4e9cc;
		line-height: 80upx;
		text-align: center;
		font-size: 26upx;
		text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
		text-decoration: none;
	}

	.cs-btn.disabled {
		pointer-events: none;
		background: #b07a7b;
		color: #ccc;
	}

	.cs-btn.disabled::after {
		border-bottom-color: #b07a7b;
	}
</style>
